<template>
  <div class="menu">
    <van-nav-bar
      title="菜谱"
      left-text="返回"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      :fixed="true"
      :placeholder="true"
    >
      <template #right>
        <!-- <van-icon name="search" size="18" /> -->
        <span v-if="$store.state.islogin==1" @click="personal">个人中心</span>
        <span v-else @click="login">登录</span>
      </template>
    </van-nav-bar>
    <div class="colla">
      <van-sidebar class="left" v-model="activeKey">
        <van-sidebar-item
          v-for="(item, i) of category"
          :key="i"
          :title="item.category"
          @click="classify(item.tid)"
        />
      </van-sidebar>
    </div>
    <div class="coll">
      <van-grid square :column-num="3" icon-size="55px">
        <van-grid-item
          @click="detailed(item.cid)"
          v-for="(item, i) of detail"
          :key="i"
          :icon="`/img/menupic/${item.menu_picture}`"
          :text="item.dishes"
        />
      </van-grid>
    </div>
    <tabbar></tabbar>
  </div>
</template>
<script>
export default {
  props: ["tids"],
  data() {
    return {
      activeKey: '0',
      category: "",
      active: "",
      detail: "",
      tid: 1,
    };
  },
  methods: {
    detailed(i) {
      console.log(i);
      this.$router.push(`/menudetails/${i}/1`);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    // onClickRight() {
    //   console.log(1)
    // },
    login() {
      this.$router.push("/login");
    },
    personal() {
      this.$router.push("/personal");
    },
    classify(tid) {
      this.tid = tid;
      this.axios.get(`/menu/detail?cid=${this.tid}`).then((result) => {
        this.detail = result.data.result;
        // console.log(result.data);
      });
    },
  },
  mounted() {
    // console.log(this.tids)
    if (this.tids > 1) {
      this.activeKey = this.tids - 1;
      this.tid = this.tids;
    }
    this.axios.get("/menu/category").then((result) => {
      this.category = result.data.results;
      // console.log(this.category);
    });
    this.axios.get(`/menu/detail?cid=${this.tid}`).then((result) => {
      this.detail = result.data.result;
      // console.log(result.data);
    });
  },
};
</script>
<style lang="scss">
.menu {
  .van-icon__image {
    width: 70px;
  }
  .van-nav-bar__text {
    color: black;
    font-weight: 500;
    font-size: 15px;
  }
  .van-icon-arrow-left::before {
    color: black;
  }
  .colla {
    // float: left;
    position: fixed;
    top: 46px;
    left: 0px;
    right: 0;
    bottom: 50px;
    overflow-y: scroll;
  }
  .dishes {
    font-size: 14px;
    color: #7b7b84;
  }
  .van-sidebar {
    // position: fixed;
    top: 10px;
  }
  .coll {
    position: fixed;
    top: 46px;
    left: 80px;
    right: 0;
    bottom: 50px;
    overflow-y: scroll;
  }
}
</style>